import React, {Component} from 'react';
import Item from "../Item"
import "./index.css"
class List extends Component {

handleChangeChecked = (done, id) => {
 this.props.changeTodo(id, done);
}

deleteItem = (id) => {
  this.props.deleteToDoItem(id);
}

  render() {
    const { toDoList } = this.props;
    return (
      <ul className="todo-main">
        {
          toDoList.map(item => {
            return <Item key={ item.id } { ...item }  handleChangeChecked = { this.handleChangeChecked } deleteItem = { this.deleteItem } />
          })
        }
      </ul>
    );
  }
}

export default List;